<!-- 好友列表 -->
<template>
  <div class="friendlist">
    <div
      class="oftenMail"
      :class="defaultTag == 0 ? 'default' : ''"
      @click="selectFriendList"
    >
      <i class="icon iconfont icon-youjiantou"></i>
      <span>常用联系人</span>
    </div>
    <el-tree
      :data="friendList"
      :props="defaultProps"
      :load="loadNode"
      lazy
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <!-- <img
        
          class="head-img"
          :src="require(`@/static/images/${data.img}`)"
        /> -->
        <i v-if="data.leaf" class="icon iconfont icon-danwei1"></i>
        <span>{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      defaultTag: 0, //默认选中
      id:0,
      defaultProps: {
        children: "children",
        label: "name",
        isLeaf: 'leaf',
      },
       friendList:[]
    };
  },
  computed: {
    ...mapState(["selectFriendId", "searchText",, "mailList"]),

    ...mapGetters([
      // 'searchedFriendlist'
    ]),
  },
  mounted() {
    this.selectFriendList();
    this.officeList();
  },
  methods: {
    // el-tree
    handleNodeClick(e) {
      console.log('handleNodeClick----',e)
      this.$store.state.infoStatus = 0; //取消选中
      this.defaultTag = 1;
        this.$api.officeList({id:e.id})
        .then((res) => {
         this.$events.$emit("friendData",res.data.users,e.name)
        })
       
    },
    // 常用联系人
    selectFriendList() {
      this.defaultTag = 0;
      this.$api
        .UserList(this.UserListParams)
        .then((res) => {
          this.$events.$emit("friendData",res.data.page.list,"常用联系人")
          // this.$store.commit("friendList", res.data.page.list);
         
          this.$store.state.infoStatus = 0;
        })
        .catch((err) => {
          console.log(err, "错误");
        });
    },
    // 组织机构
       officeList() {
      this.$api.officeList({id:this.id})
        .then((res) => {
         this.friendList = res.data.offices
        })
    },
     loadNode(node, resolve) {
       console.log(node,'eee')
      //  return
        if (node.level === 0) {
          return resolve(this.mailList);
        }
        else{
          this.$api
        .officeList({id:node.data.id})
        .then((res) => {
           this.$events.$emit("friendData",res.data.users,node.data.name)
          return resolve(res.data.offices)
        })
        .catch((err) => {
          console.log(err, "错误");
        });
        }
      }
   
    // ...mapActions(["officeList"]),
  },
};
</script>

<style lang="scss" scoped>
@import "../../static/fonts/iconfont.css";
.friendlist {
  height: 540px;
  overflow: auto;
  .frienditem {
    // border-top: 1px solid #dadada;
    &:first-child,
    &.noborder {
      border-top: none;
    }

    .list_title {
      box-sizing: border-box;
      width: 100%;
      font-size: 12px;
      padding: 15px 0 3px 12px;
      color: #999;
    }

    .friend-info {
      display: flex;
      padding: 6px;
      transition: background-color 0.1s;
      font-size: 0;
      align-items: center;
      &:hover {
        background-color: rgb(220, 220, 220);
      }

      &.active {
        background-color: #ececec;
      }

      .avatar {
        border-radius: 2px;
        margin-right: 12px;
      }

      .remark {
        font-size: 14px;
        line-height: 36px;
      }
    }
  }
}
// 常用联系人
.oftenMail {
  width: 90%;
  margin: 0 auto;
  height: 40px;
  display: flex;
  align-items: center;
  i {
    margin-left: 5px;
  }
  &:hover {
    background: #ececec;
  }
}
.default {
  background: #ececec;
}
.white {
  background: white;
}
// 头像
.head-img {
  width: 36px;
  height: 36px;
}
.el-tree /deep/ .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
//有子节点 且未展开
.el-tree /deep/ .el-icon-caret-right:before {
  background: url("../../static/images/right.png") no-repeat 0 0px;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}

//有子节点 且已展开
.el-tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url("../../static/images/down.png") no-repeat 0 0px;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}

//没有子节点
.el-tree /deep/ .el-tree-node__expand-icon.is-leaf::before {
  // background: url("../../static/images/danwei.png") no-repeat 0 0px;
  // content: "";
  // display: block;
  // width: 16px;
  // height: 16px;
  // font-size: 16px;
  // background-size: 16px;
  display: none;
}

.el-tree /deep/ .el-tree-node .el-tree-node__content {
  height: 40px !important;
  &:hover {
    border-radius: 4px;
  }
}
.el-tree /deep/ .el-tree-node__content  .el-tree-node {
  height: 56px !important;
  &:hover {
    border-radius: 4px;
  }
}

.custom-tree-node {
  display: flex;
  align-items: center;
  img {
    margin-right: 8px;
    border-radius: 3px;
  }
}

// // 二级菜单
.el-tree /deep/ .el-tree-node__children .el-tree-node .el-tree-node__content {
  height: 56px;
}
.el-tree /deep/ .el-tree-node__content:hover {
  background: #ececec;
}
.el-tree {
  width: 90%;
  margin: 0 auto;
}
</style>
